<template>
	<view>
		<jiazai v-if="isshow"></jiazai>
		<view v-if="!isshow" class="playlist animated fadeIn slow" >
		    <view class="title">
		        <view class="title_name">
		            <text>华语</text>
		        </view>
		        <view class="title_sort">
		            <image src="../../../static/icon/cm2_discover_icn_4@2x.png" mode="widthFix"/>
		            <text >选择分类</text>
		        </view>
		    </view>
		    <view class="content">
		        <view class="content_item "
				v-for="item in playlist"
		        :key="item.id"
				:data-id="item.id"
				@tap="toplaylist"
		        >
		            <view class="content_item_img">
						<image mode="widthFix" :src="item.coverImgUrl" />
		            </view>
		            <view class="content_item_name">
		               <text style="line-height:36upx;" class="eps-2">{{item.name}}</text> 
		            </view>
		        </view>
				<load-more></load-more>
		    </view>
		</view>
	</view>
</template>

<script>
	import loadMore from '../load-more/load-more.vue';
	import jiazai from '../../home/jiazai/jiazai.vue'
	export default {
		components:{
			loadMore,
			jiazai,
		},
		data() {
			return {
				isshow:true,
				playlist:[],
				playlistCat:'华语',
				pagesize:20		
			}
		},
		created() {
			this.getplaylist()
		},
		methods: {
			async getplaylist(){
 			    let {pagesize}=this;
			    let playlistInfo=await this.request({url: this.bsurl+'top/playlist?order=hot&cat=华语&limit='+pagesize}); 		
			    let playlist=playlistInfo.playlists.map(v=>{
			        return{
			          name:v.name,
			          coverImgUrl:v.coverImgUrl+'?param=200y200',
			          id:v.id
			        }
			    })
			    let playlistCat=playlistInfo.cat;
			    this.playlist=[...playlist];
			    this.playlistCat;
				if(this.isshow){
					if(this.Finish()){
						setTimeout(()=>{
							this.isshow=false
						}, 1000);
					}			
				}

			},
			hanlegetplaylist(){
			    this.pagesize+=20;
			    this.getplaylist();
			},
			toplaylist(e){
				let {id}=e.currentTarget.dataset;
				uni.navigateTo({
					url:'../playlist/playlist?id='+id
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	text{
		padding: 0;
		margin: 0;
	}
	.playlist{
	    width: 100%;
	    .title{
	       width: 100%;
	       display: flex;
	       padding:15upx 15upx 15upx 15upx ;
	       align-items: center;
	       .title_name{
	            flex: 13;
	            height: 40upx;
	            border-left: 4upx solid red;
	            display: flex;
	            align-items: center;
	            text{
	                padding-left:15upx;
	                font-size: 30upx;
	            }
	       }
	       .title_sort{
	           flex: 3;
	           display: flex;
	           align-items: center;
	           border: 1upx solid #eeeeee;
	           padding: 10upx;
	           image{
	            width: 18%;
	            }
	           text{
	            font-size: 24upx;
	            padding-left: 10upx;
	           }
	       }
	    }
	    .content{
	        width: 100%;
	        display: flex;
	        flex-wrap: wrap;
	        align-items: center;
	        .content_item{          
	            width: 340upx;
	            margin:15upx;
	            .content_item_img{
	                image{
	                    width: 100%;
	                }
	            }
	            .content_item_name{
	                height: 70upx;
	            }
	        }
	    }
	}
</style>
